<!-- 分红规则新建编辑 -->
<template>
	<div class="dividendrule">
		 <el-breadcrumb  separator="/" class="bread-title">
		    <el-breadcrumb-item :to="{ path: '/dividendRule' }">分红结算规则</el-breadcrumb-item>
		    <el-breadcrumb-item>{{pagetype=='add'?'新增':'编辑'}}</el-breadcrumb-item>
		 </el-breadcrumb>
	  	 <el-steps class="steps"  :active="active" :space="600" finish-status="success" style="margin:10px 200px">
		    <el-step title="分红结算设置"></el-step>
		    <el-step title="预览"></el-step>
		 </el-steps>

		<div v-show="active == 1">
		 	<el-form :model="ruleForm" ref="ruleform" label-width="140px" class="demo-ruleForm">
		 		<el-form-item label="规则名称：" prop="name" >
		 		    <el-input v-model.trim="ruleForm.name" placeholder="请输入分红结算规则名称"  maxlength="20" style="width: 400px;"></el-input>
		 		</el-form-item>
		 		<el-form-item  label="计算类型：" prop="type">
		 			<el-radio-group v-model="ruleForm.type" :disabled="status==3">
		 			   <el-radio :label="1">利润率</el-radio>
		 			   <el-radio :label="2">利润额</el-radio>
		 			 </el-radio-group>
		 		</el-form-item>
		 		<el-form-item  label="分红单位：" prop="dividendUnit">
		 			<el-radio-group v-model="ruleForm.dividendUnit" :disabled="status==3">
		 			   <el-radio :label="1">百分比（%）</el-radio>
		 			   <el-radio :label="2">金额（元）</el-radio>
		 			 </el-radio-group>
		 		</el-form-item>
		 		<el-form-item  label="区间设置：" >
					<ul class="intervalwrapper" >
						<div class="flexwrapper">
							<span>利润计算区间：</span>
							<span>利润分配：</span> 
							<span>激励基数：</span>
							<span>激励分配：</span>
						 </div>
						<li class="flexwrapper" style="margin-bottom: 10px" v-for="(item,index) in ruleForm.sectionList">
							<span>
								<el-input :disabled="index == 0" v-model="item.profitBegin"  type="number" step='0.01' style="width: 120px;" @input.native="checkNum(item.profitBegin,index,'profitBegin')"></el-input>
								{{ruleForm.type==1?'%':'元'}}  —— 
								<el-input :disabled="index== ruleForm.sectionList.length-1 && index !==0" v-model="item.profitEnd" type="number" style="width: 120px;" step='0.01' @input.native="checkNum(item.profitEnd,index,'profitEnd')"></el-input>{{ruleForm.type==1?'%':'元'}}
							</span>
							<span>
								<el-input v-model="item.profitProportion" type="number" style="width: 120px;" step='0.01' @input.native="checkNum(item.profitProportion,index,'profitProportion')"></el-input>{{ruleForm.dividendUnit==1?'%':'元'}}
							</span>
							<span>
								<el-select v-model="item.profitBase">
						            <el-option v-for="item1 in profitBaseList" :label="item1.label" :value="item1.id" :key="item1.id"></el-option>
						        </el-select>
	    					</span>
	    					<span>
	    						<el-input v-model="item.distributionProportion" type="number" style="width: 120px;" step='0.01' @input.native="checkNum(item.distributionProportion,index,'distributionProportion')"></el-input>{{ruleForm.dividendUnit==1?'%':'元'}}
	    					</span>
	    					<el-button v-if="index !==ruleForm.sectionList.length-1 && index !==0" type="text" @click="delinerval(index)">&nbsp;&nbsp;删除</el-button>
						</li>
					</ul>
					<el-button style="margin-left: 40px" type="primary" @click="addinterval">增加+</el-button>
		 		</el-form-item>
		 	</el-form>
		 	<div style="margin:70px 300px">
			 	<el-button style="margin-left: 40px" type="primary" @click="stephander('ruleform')">下一步</el-button>
			 	<el-button style="margin-left: 40px" type="primary" @click="cancel">取消</el-button>	
		 	</div>
		</div>
		<div v-show="active == 2" style="margin: 20px 100px">
			<p> 规则名称：{{ruleForm.name}} </p>
			<p> 计算类型：{{ruleForm.type == 1?'利润率':'利润额'}}</p>
			<p> 计算类型：{{ruleForm.dividendUnit == 1?'百分比(%)':'金额（元)'}} </p>
			<p style="margin: 20px 0;display: flex;"> 区间设置：
				<el-table :data="ruleForm.sectionList" border>
				    <el-table-column label="利润计算区间" prop="reportFormName" align="center" :formatter="initinterval">
				    </el-table-column>
				    <el-table-column label="利润分配" prop="profitProportion"  align="center">
				    	<template slot-scope="scope">
				    			{{scope.row.profitProportion}}{{ruleForm.dividendUnit==1?'%':'元'}}
				    	</template>
				    </el-table-column>
				    <el-table-column label="激励基数" prop="profitBase" align="center">
				    	<template slot-scope="scope">
				    			{{scope.row.profitBase=='1'?'营收业绩':''}}
				    	</template>
				    </el-table-column>
				    <el-table-column label="激励分配" prop="distributionProportion" align="center">
				    	<template slot-scope="scope">
				    			{{scope.row.distributionProportion}}{{ruleForm.dividendUnit==1?'%':'元'}}
				    	</template>
				    </el-table-column>
				</el-table>
			</p>

		 	<div style="margin:70px 300px">
			 	<el-button style="margin-left: 40px" type="primary" @click="prevhander">上一步</el-button>
			 	<el-button style="margin-left: 40px" type="primary" @click="savehander">保存</el-button>
			 	<el-button style="margin-left: 40px" type="primary" @click="cancel">取消</el-button>	
		 	</div>
		</div>
	</div>
</template>
<script>
	import api from '@/api/apiPath'
	export default {
	    data() {
	        return {
	        	state:{},
	        	active: 1,
	        	ruleForm:{
	        		id:undefined,
	        		name:'',
	        		type:1,//类型 利润区间类型 //计算类型 1利润率 2利润额
	        		dividendUnit:1,//单位 分红类型
	        		sectionList:[
		        		{profitBegin:null,profitEnd:null,profitProportion:null,profitBase:1,distributionProportion:null,orderNumber:null},
		        		{profitBegin:null,profitEnd:null,profitProportion:null,profitBase:1,distributionProportion:null,orderNumber:null},
		        		{profitBegin:null,profitEnd:null,profitProportion:null,profitBase:1,distributionProportion:null,orderNumber:null},
	        		],
	        	},
	        	profitBaseList:[ {id: 1, label: '营收业绩'}],
	        	pagetype:'add',
	        	status:undefined,
	        }
	    },
	    created() {
	    	this.pagetype = this.$route.query.pagetype
	    	this.ruleForm.id =this.$route.query.id
	    	this.getlist()
	    },
	    methods: {
			getlist(){
				if (this.pagetype == 'edit') {
					this.axios.get(api.INVESTSHAREDETAIL+'/'+this.ruleForm.id).then(res =>{
						if (res.data.code == 200) {
							let tempdata = res.data.data
							this.ruleForm.name = tempdata.shareOutDetail.name
							this.ruleForm.type = tempdata.shareOutDetail.type
							this.ruleForm.dividendUnit = tempdata.shareOutDetail.dividendUnit
							this.ruleForm.sectionList = tempdata.sections
							this.status = tempdata.shareOutDetail.status
						}
					})
				}
			},
	    	initinterval(row, column, cellValue, index){
	    	    let str =''
	    	    if (!row.profitBegin) {
	    	        str = '<'+row.profitEnd + (this.ruleForm.type==1?'%':'元')
	    	    }else if(row.profitBegin && row.profitEnd){
	    	        str =  row.profitBegin +(this.ruleForm.type==1?'%':'元')+'(含) -'+ row.profitEnd+(this.ruleForm.type==1?'%':'元')+'(不含）'
	    	    }else if(!row.profitEnd){
	    	        str = '≥'+row.profitBegin+(this.ruleForm.type==1?'%':'元')
	    	    }
	    	    return str
	    	},
	    	checkNum(val,index,type){
	    	 	let value = (val.toString().match(/^\d*(\.?\d{0,2})/g)[0])
	    	 	this.$nextTick(()=>{
	    	 		if(value.length>9) value=value.slice(0,9)
	    	 		this.$set(this.ruleForm.sectionList[index], type, value)
	    	 	})
	    	},
	    	stephander(formName){
	   			if (this.ruleForm.sectionList.length == 0) {
	   				this.$message({
   				          showClose: true,
   				          message: '请增加区间设置',
   				          type: 'warning'
	   				});
	   				return
	   			}

				if (this.ruleForm.name == '') {
					this.$message({
					      showClose: true,
					      message: '规则名称不能为空',
					      type: 'warning'
					});
					return
				}

	   			this.$refs[formName].validate((valid) => {
	   			  if (valid) {
					for(let index in this.ruleForm.sectionList){
						let item = this.ruleForm.sectionList[index];
						//第一项排除上限
						if (index == 0 ) {
							if(!item.profitEnd && item.profitEnd !== 0){
								this.$message({
								      showClose: true,
								      message:`第${+index+1}行区间设置下限不能为空`,
								      type: 'warning'
								});
								return
							}
						//最后一项项排除下限
						}else if(index == this.ruleForm.sectionList.length-1){
							if (!item.profitBegin) {
								this.$message({
								      showClose: true,
								      message:`第${+index+1}行区间设置上限不能为空`,
								      type: 'warning'
								});
								return
							}
						}else if (index !== 0 && index !== this.ruleForm.sectionList.length-1) {
							if (!item.profitEnd) {
								this.$message({
								      showClose: true,
								      message:`第${+index+1}行区间设置下限不能为空`,
								      type: 'warning'
								});
								return
							}
							if (!item.profitBegin) {
								this.$message({
								      showClose: true,
								      message:`第${+index+1}行区间设置上限不能为空`,
								      type: 'warning'
								});
								return
							}
							//同一区间前者不能大于后者
							if (+item.profitBegin > +item.profitEnd) {
							    this.$message({
							        message:`第${+index+1}行同一区间内容前者不能大于后者`,
							        type: 'warning'
							    });
							    return
							}
							if (+item.profitBegin == +item.profitEnd) {
							    this.$message({
							        message:`第${+index+1}行同一区间内容前者不能等于后者`,
							        type: 'warning'
							    });
							    return
							}
						}
						//上一区间不能大于大一区间
						if (index > 0) {
							if (+item.profitBegin < +this.ruleForm.sectionList[index-1].profitEnd) {
								this.$message({
								    message:`第${index}行区间不能大于下一区间`,
								    type: 'warning'
								});
								return
							}
						}
						//判断利润分配
						if(!item.profitProportion){
							this.$message({
							    message:`第${+index+1}行利润分配不能为空`,
							    type: 'warning'
							});
							return
						}
						if(!item.profitBase){
							this.$message({
							    message:`请选择第${+index+1}行的激励基数`,
							    type: 'warning'
							});
							return
						}
						if(!item.distributionProportion){
							this.$message({
							    message:`第${+index+1}行的激励分配不能为空`,
							    type: 'warning'
							});
							return
						}
					}

					if (this.active++ > 1)  return
	   			  } else {
	   			    console.log('error submit!!');
	   			    return false;
	   			  }
	   			});

	    	},
	    	cancel(){
	    		this.$router.push({path:"/dividendRule"})
	    	},
		   addinterval(){
		  	   this.ruleForm.sectionList.push({profitBegin:null,profitEnd:null,profitProportion:null,profitBase:1,distributionProportion:null,orderNumber:null})
		   },
		   delinerval(val){
		   		this.ruleForm.sectionList.splice(val,1)
		   },
		   prevhander(){
		    	this.active-- 
		   },
		   savehander(){
				let url = api.INVESTCREATE
				if (this.pagetype == 'edit') {
					url = api.INVESTSHAREUPDATE
				}

				let temparr = JSON.parse(JSON.stringify(this.ruleForm.sectionList))
				for(let i in temparr){
					temparr[i]['orderNumber'] = Number(i)+1
					if (i == 0) {
						temparr[i]['profitBegin'] = -1
					}else if(i == temparr.length-1){
						temparr[i]['profitEnd'] = 999999999
					}
				}
				let obj = {}
				obj.dividendUnit = this.ruleForm.dividendUnit
				obj.name = this.ruleForm.name
				obj.type = this.ruleForm.type
				obj.sectionList = temparr
				obj.id = this.ruleForm.id
				this.axios.post(url,obj).then((res)=>{
					if (res.data.code == 200) {
						this.$message({
						    message:this.pagetype == 'edit'?'编辑成功':'新增成功',
						    type: 'success'
						});
						this.$router.push({path:"/dividendRule"})
					}
				})
		   }

	    }

	}

</script>

<style lang="stylus">
	.intervalwrapper
		list-style: none
	.flexwrapper
		display: flex
	.flexwrapper span:first-child
		width: 25%
	.flexwrapper span:nth-child(2)
		width: 13%
	.flexwrapper span:nth-child(3)
		width: 15%
	.dividendrule .steps
		display:flex
		justify-content:center
		margin-bottom:60px !important
		

</style>